<template>
  <view class="container">

    <view class="image-container">
      <view class="round-image-wrapper">
        <image 
          :src="imageUrl || '/static/tupian.jpg'" 
          mode="aspectFill" 
          class="round-image"
        ></image>
      </view>
    </view>

    <view class="btn-group">
      <button 
        class="custom-btn" 
        @click="chooseAndShowImage"
      >
        选择图片显示
      </button>
      <button 
        class="custom-btn" 
        @click="previewCurrentImage"
        :disabled="!imageUrl"
      >
        预览图片
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'static/tupian.jpg',
      defaultImage: '/static/default-avatar.png'
    }
  },
  methods: {
    navBack() {
      uni.navigateBack({
        delta: 1
      });
    },

    chooseAndShowImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'], 
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0];
          uni.showToast({
            title: '图片已显示',
            icon: 'none'
          });
        },
        fail: (err) => {
          console.log('选择图片失败', err);
          uni.showToast({
            title: '选择失败',
            icon: 'none'
          });
        }
      });
    },

    previewCurrentImage() {
      if (!this.imageUrl) return;
      uni.previewImage({
        current: this.imageUrl, 
        urls: [this.imageUrl], 
        loop: true, 
        success: () => {
          console.log('预览成功');
        },
        fail: (err) => {
          console.log('预览失败', err);
          uni.showToast({
            title: '预览失败',
            icon: 'none'
          });
        }
      });
    },
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  background-color: #ffffff;
}

.back-btn {
  font-size: 20px;
  color: #333;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #333;
}

/* 图片显示区域 */
.image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx;
}

.round-image-wrapper {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ddd;
  background-color: #fff;
}

.round-image {
  width: 100%;
  height: 100%;
}

/* 按钮区域 */
.btn-group {
  padding: 30rpx 40rpx 50rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.custom-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 16px;
  border-radius: 10rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
}

.custom-btn:disabled {
  background-color: #b3d4fc;
  color: #fff;
}
</style>